<div class="container">
    <div class="search">
        <form nz-form nzLayout="inline">
            <nz-form-item>
                <nz-form-label>岗位编码</nz-form-label>
                <nz-form-control class="search-field">
                    <input nz-input type="text" placeholder="请输入岗位编码">
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label>岗位名称</nz-form-label>
                <nz-form-control class="search-field">
                    <input nz-input type="text">
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label>状态</nz-form-label>
                <nz-form-control class="search-field">
                    <nz-select nzPlaceHolder="请选择状态">
                        <nz-option nzValue="0" nzLabel="正常"></nz-option>
                        <nz-option nzValue="1" nzLabel="停用"></nz-option>
                    </nz-select>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-control>
                    <nz-space>
                        <button *nzSpaceItem nz-button nzType="primary"><span nz-icon nzType="search"></span>搜索</button>
                        <button *nzSpaceItem nz-button><span nz-icon nzType="redo"></span>重置</button>
                    </nz-space>
                </nz-form-control>
            </nz-form-item>
        </form>
    </div>
    <div class="table">
        <div class="opts">
            <nz-space>
                <button (click)="addPost()" *nzSpaceItem nz-button nzType="primary"> <span nz-icon nzType="plus"></span>新增</button>
            </nz-space>
        </div>
        <nz-table #postData [nzData]="posts" [nzLoading]="loading">
            <thead>
                <tr>
                    <th id="postId" [nzAlign]="'center'">岗位编号</th>
                    <th id="postCode" [nzAlign]="'center'">岗位编码</th>
                    <th id="postName" [nzAlign]="'center'">岗位名称</th>
                    <th id="postSort" [nzAlign]="'center'">岗位排序</th>
                    <th id="status" [nzAlign]="'center'">状态</th>
                    <th id="createTime" [nzAlign]="'center'">创建时间</th>
                    <th id="action" [nzAlign]="'center'">操作</th>
                </tr>
            </thead>
            <tbody>
                @for (post of postData.data; track post.id) {
                    <tr>
                        <td [nzAlign]="'center'">{{post.postId}}</td>
                        <td [nzAlign]="'center'">{{post.postCode}}</td>
                        <td [nzAlign]="'center'">{{post.postName}}</td>
                        <td [nzAlign]="'center'">{{post.postSort}}</td>
                        <td [nzAlign]="'center'">{{post.status}}</td>
                        <td [nzAlign]="'center'">{{post.createTime}}</td>
                        <td>
                            <a>编辑</a>
                            <nz-divider nzType="vertical"></nz-divider>
                            <a>删除</a>
                        </td>
                    </tr>
                }
            </tbody>
        </nz-table>
    </div>
</div>

<nz-modal
    [(nzVisible)]="isVisible"
    [nzTitle]="title"
    (nzOnOk)="onSubmit()"
    (nzOnCancel)="onCancel()"
    nzWidth="500px"
>
    <ng-container *nzModalContent>
        <form nz-form [nzLayout]="'vertical'" [formGroup]="postForm" (ngSubmit)="onSubmit()">
            <nz-form-item>
                <nz-form-label [nzSpan]="4" nzFor="postName" nzRequired>岗位名称</nz-form-label>
                <nz-form-control [nzSpan]="20" nzErrorTip="请输入岗位名称">
                    <input formControlName="postName" id="postName" nz-input type="text">
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSpan]="4" nzRequired>岗位编码</nz-form-label>
                <nz-form-control [nzSpan]="20" nzErrorTip="请输入岗位编码">
                    <input formControlName="postCode" nz-input type="text">
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSpan]="4" nzRequired>岗位顺序</nz-form-label>
                <nz-form-control [nzSpan]="20" nzErrorTip="请输入岗位顺序">
                    <input formControlName="postSort" nz-input type="text">
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSpan]="4" nzRequired>状态</nz-form-label>
                <nz-form-control [nzSpan]="20" nzErrorTip="请选择状态">
                    <nz-radio-group formControlName="status">
                        <label nz-radio nzValue="0">正常</label>
                        <label nz-radio nzValue="1">停用</label>
                    </nz-radio-group>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSpan]="4">备注</nz-form-label>
                <nz-form-control [nzSpan]="20" >
                    <textarea formControlName="remark" nz-input ></textarea>
                </nz-form-control>
            </nz-form-item>
        </form>
    </ng-container>
</nz-modal>